<template>
  <el-aside width="200px">
    <el-menu>
      <template v-for="item in data">
        <!-- 有子菜单，嵌套菜单 -->
        <el-submenu v-if="hasChildren(item)"
                    :key="item.name"
                    :index="item.name">
          <template slot="title">
            <i :class="getIconCls(item.meta.icon)"></i>
            {{ item.meta.title }}
          </template>
          <template v-for="child in item.children">
            <el-submenu v-if="hasChildren(child)"
                        :key="child.name"
                        :index="child.name">
              <template slot="title">{{ item.meta.title }}</template>
              <nuxt-link :to="child.path">
                <el-menu-item :key="child.name"
                              :index="child.name">
                  {{ child.meta.title }}
                </el-menu-item>
              </nuxt-link>
            </el-submenu>
            <template v-else>
              <nuxt-link :key="child.path"
                         :to="child.path">
                <el-menu-item :key="child.name"
                              :index="child.name">
                  {{ child.meta.title }}
                </el-menu-item>
              </nuxt-link>
            </template>
          </template>
        </el-submenu>
        <template v-else>
          <!-- 只有一层菜单 -->
          <nuxt-link :key="item.path"
                     :to="item.path">
            <el-menu-item :key="item.name"
                          :index="item.name">
              <i :class="getIconCls(item.meta.icon)"></i>
              {{ item.meta.title }}
            </el-menu-item>
          </nuxt-link>
        </template>
      </template>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'Sidebar',
  props: {
    data: { type: Array, default: () => [] }
  },
  data () {
    return {}
  },
  created () { },
  mounted () { },
  methods: {
    hasChildren (item) {
      return item.children && item.children.length > 0
    },
    getIconCls (iconName) {
      return `el-icon-${iconName}`
    }
  }
}
</script>
<style lang="less" scoped>
.el-aside {
  color: #333;
  border-right: solid 1px #e6e6e6;
  height: 100%;
  .el-menu {
    border-right: 0;
  }
}
</style>
